<template>
  <div class="tobeDone">
    <tableIndex
      :tableData="tableData"
      :tableHead="tableHead"
      :isIndex="true"
      :isSelection="true"
      :isRadio="false"
      :fields="fields"
      :height="500"
      @selectChange="selectChange"
    >
      <template #btns>
        <div style="float: right" v-if="activeName.value == '0'">
          <el-button
            size="small"
            style="
               { color: #d4ae85;
                border: 1px solid #d4ae85;
                backgroundcolor: #fff;
                :hover {
                  color: #d4ae85;
                  background-color: #fff;
                }
              }
            "
            ><svg-icon icon-class="export" /> 一键导出</el-button
          >
        </div>
      </template>
      <template #operate>
        <el-table-column label="操作" width="240" align="center" fixed="right">
          <template #default="{ row }">
            <el-button
              size="small"
              color="#fc702b"
              style="color: #fff"
              @click="overHandler(row)"
              >完成</el-button
            >
            <el-button
              size="small"
              type="primary"
              style="
                 {
                  color: #d4ae85;
                  border: 1px solid #d4ae85;
                  :hover {
                    color: #d4ae85;
                    background-color: #fff;
                  }
                  backgroundcolor: rgb(245, 245, 245);
                }
              "
              @click="reportHandler(row)"
              >上报</el-button
            >
            <el-button
              size="small"
              color="#D4AE85"
              style="color: #fff; border: #d4ae85"
              @click="lookItemHandler(row)"
              >审核</el-button
            >
          </template>
        </el-table-column>
      </template>
    </tableIndex>
    <!-- 完成弹框 -->
    <overDialog ref="overdialog"></overDialog>
    <!-- 上报弹框 -->
    <reportDialog ref="reportdialog"></reportDialog>
  </div>
</template>

<script setup>
import tableIndex from '@/components/table/index.vue'
import overDialog from './components/overDialog.vue'
import reportDialog from './components/reportDialog.vue'
import { ref, onMounted } from 'vue'
import { ElButton, ElTabs, ElTabPane } from 'element-plus'

name: ''
const fields = ref([
  { key: 'name', label: '任务类型', type: 'input' },
  {
    key: 'name',
    label: '项目名称',
    type: 'input',
    placeholder: '项目名称关键字搜索'
  }
])
const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: '122222222222222222222222'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: '1'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: '1'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '1'
  }
])

let tableHead = ref([
  {
    prop: 'date',
    label: '项目',
    width: '180',
    style: {
      color: '#FD8941',
      rgb: (254, 114, 26)
    }
  },
  {
    prop: 'name',
    label: '任务名称',
    width: '120',
    isSvg: ''
  },
  {
    prop: 'address',
    label: '任务代码'
  },
  {
    prop: 'address',
    label: '里程碑',
    isSvg: ['lcb_true', 'lcb_false']
  },
  {
    prop: 'address',
    label: '工作细项'
  },
  {
    prop: 'address',
    label: '作业状态'
  },
  {
    prop: 'address',
    label: '计划开始时间'
  },
  {
    prop: 'address',
    label: '计划完成时间'
  },
  {
    prop: 'address',
    label: '存在的问题及困难'
  },
  {
    prop: 'address',
    label: '工期'
  },
  {
    prop: 'address',
    label: '责任部门'
  },
  {
    prop: 'address',
    label: '是否超时',
    isSvg: ['project_maturity', '']
  }
])
let activeName = ref('0')
const overdialog = ref(null)
const reportdialog = ref(null)
//完成按钮事件

const overHandler = (row) => {
  overdialog.value.centerDialogVisible = true
}
//上报
const reportHandler = (row) => {
  reportdialog.value.centerDialogVisible = true
}
//选中事件
const selectChange = (row) => {
  console.log(row)
}
//审核
const lookItemHandler = (row) => {
  console.log(row)
}

onMounted(() => {})
</script>

<style lang="scss" scoped>
.tobeDone {
  width: 100%;
  height: 100%;
}
</style>
